/*
 * @Author: xiehangyun 
 * @Date: 2025-05-10 18:18:41 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-11 20:53:00
 */

.category {

    .categoryList {
        background-color: #ffffff;
        height: 100%;
        overflow-x: auto;
        margin-top: 40rpx;

        .categoryItem {
            height: 100rpx;
            box-sizing: border-box;
            padding: 30rpx 0;
            text-align: center;
            cursor: pointer;
            color: #333;
            font-size: 28rpx;

            &.active {
                color: #fd7901;
                background-color: #F2F2F2;
            }
        }
    }

    .searchContainer {
        padding: 10px;
    }

    .customSearchBar {
        border-radius: 20px;
        background-color: #F2F2F2;

        :global(.nut-searchbar__input) {
            padding-left: 10px;
        }

        :global(.nut-searchbar-right) {
            background-color: #ff8c00;
            color: #fff;
            border-radius: 10px;
            padding: 5px 15px;
        }
    }

    .scrollContainer {
        height: 166rpx;
        overflow-x: auto;
        padding: 10rpx;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;

        &::-webkit-scrollbar {
            display: none;
        }

        .item {
            width: 100rpx;
            margin-right: 20rpx;
            text-align: center;
            border-radius: 8px;
            padding: 10px;
            text-align: center;

            &.active {
                .itemText {
                    color: #fd7901;
                }
            }

            .itemImage {
                width: 100rpx;
                height: 100rpx;
                object-fit: cover;
                border-radius: 8rpx;
                // background-color: #ffffff;
            }

            .itemText {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #333;
            }
        }
    }

    .scrollFilter {
        overflow-x: auto;
        padding: 10rpx 10rpx 20rpx 10rpx;
        white-space: nowrap;

        &::-webkit-scrollbar {
            display: none;
        }

        .item {
            display: inline-block;
            margin: 0px 10rpx;
            padding: 6px 15px;
            font-size: 24rpx;
            border-radius: 18rpx;
            background-color: #ffffff;
            color: #333;

            &.active {
                color: #fd7901;
                background-color: #fd7901;
                color: #ffffff;
            }

        }

    }

    .goodsList {
        padding: 0rpx 10rpx;
        // background-color: #dbffab;
        box-sizing: border-box;
        overflow-y: scroll;

        .goodsItem {
            width: 92%;
            margin: 0px 4%;
            background-color: #fff;
            border-radius: 40rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10rpx;
        }

        // .goodsImage {
        //     width: 100%;
        //     height: auto;
        //     border-radius: 8rpx;
        //     margin-bottom: 8rpx;
        //     /* 减少底部间距 */
        //     text-align: center;
        // }

        .goodsImage {
            width: 100%;
            height: 250rpx;
            border-radius: 8rpx;
            background-size: 100% auto, 90% auto;
            background-position: center center;
            background-repeat: no-repeat;
        }

        .goodsName {
            text-align: left;
            width: 100%;
            font-size: 28rpx;
            /* 调整字体大小 */
            color: #333;
            /* 减少底部间距 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
            padding: 0rpx 20rpx;
            box-sizing: border-box;
        }

        .goodsFooter {
            width: 100%;
            text-align: left;
            font-weight: bold;
            padding: 0rpx 20rpx 20rpx 20rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 10rpx;

            .originalPrice {
                color: #999;
                text-decoration: line-through;
                font-size: 24rpx;
                font-weight: normal;
            }
        }
    }

}